<template>
    <div>
        <div class="page-title">HSE审核主题分配</div>
        <div class="page-content">
            <el-row>
                <el-form
                :inline="true"
                v-model="filterQuery">
                    <el-form-item
                    label="年：">
                        <el-date-picker
                        type="year"
                        format="yyyy"
                        value-format="yyyy"
                        placeholder="请选择年限"
                        v-model="filterQuery.taskDate"
                        style="width: 180px"
                        clearable>
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item
                    label="轮次：">
                    <el-input
                    style="width: 160px" placeholder="请输入搜索轮次" v-model="filterQuery.round" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" style="width: 100px" icon="el-icon-search" @click="handleSearch">查 询</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row>
                <el-table
                :data="hseAuditGrouptable"
                :header-cell-style="{'text-align': 'center'}"
                :cell-style="{'text-align': 'center'}"
                height="500px"
                style="width: 100%"
                border>
                    <el-table-column
                    label="序号"
                    type="index">
                    </el-table-column>
                    <el-table-column
                    label="审核组"
                    prop="auditGroupName"
                    min-width="80px">
                    </el-table-column>
                    <el-table-column
                    label="审核轮次"
                    prop="round"
                    min-width="100px">
                    </el-table-column>
                    <el-table-column
                    label="审核类型"
                    prop="groupType"
                    min-width="100px">
                    </el-table-column>
                    <el-table-column
                    label="审核组成员"
                    prop="members"
                    min-width="200px"
                    :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column
                    label="操作"
                    min-width="100px">
                        <template slot-scope="scope">
                            <el-button type="warning" size="mini" icon="el-icon-edit-outline" @click="handleEdit(scope.row)">修改主题</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-base">
                    <el-pagination
                    background
                    @current-change="handlePageChange"
                    layout="total, prev, pager, next"
                    :total="pageTotal"></el-pagination>
                </div>
            </el-row>

            <!-- 分配审核主题弹窗 -->
            <el-dialog
            title="分配审核主题"
            :visible.sync="editVisibleDialog">
                <el-tabs v-model="memberData" tab-position="left" @tab-click="getGroupMember">
                   <el-tab-pane
                   v-for="item in rowGroupMemberData"
                   :key="item.auditGroupMemberID"
                   :label="item.staffName"
                   :name="item.auditGroupMemberID">
                       <el-row >
                           组内角色：
                            <el-input v-model="item.groupRole" style="width: 120px" disabled></el-input>
                       </el-row>
                       <el-row style="height: 10px"></el-row>
                       <el-row >
                           审核主题：
                           <el-select 
                           placeholder="请选择主题"
                           v-model="memberTopic"
                           multiple
                           value-key="hseAuditSystemCode"
                           @change="updateMemberAuditTopic"
                           style="width: 60%">
                               <el-option
                               v-for="item in auditTopic"
                               :key="item.hseAuditSystemCode"
                               :label="item.evalueItem"
                               :value="item"></el-option>
                           </el-select>
                       </el-row>
                   </el-tab-pane>
                </el-tabs>
                <span slot="footer">
                    <el-button @click="editVisibleDialog = false">取 消</el-button>
                    <el-button type="primary" @click="submitAuditTopic">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { GetHSEAuditGroupData,
         GetHSEAuditGroupTopic,
         UpdateHSEAuditTopic } from '../../../services/hseAudit'

export default {
    data() {
        return {
            filterQuery: {
                taskDate: '',
                round: ''
            },
            role: '',
            hseAuditGroupMember: [],
            updateAuditTopic: [],
            hseAuditGrouptable: [],
            auditMemberTopic: '',
            memberData: '',
            rowGroupMemberData: [],
            membersData: [],
            groupMember: [],
            auditTopic: [],
            editVisibleDialog: false,
            memberTopic: [],
            memberID: '',
            pageTotal: null,
        }
    },
    mounted() {
        this.handleSearch()
    },
    methods: {
        handleSearch() {
            GetHSEAuditGroupData(this.filterQuery).then(res => {
                this.hseAuditGrouptable = []
                this.membersData = []
                console.log(res.data);
                for(var index in res.data) {
                    this.membersData[this.membersData.length] = res.data[index]
                    this.hseAuditGrouptable[this.hseAuditGrouptable.length] = {
                        auditGroupID: index,
                        auditGroupName: res.data[index][0].auditGroupName,
                        groupType: res.data[index][0].groupType,
                        round: res.data[index][0].round,
                    }
                }
                for(var i in this.membersData) {
                    var members = []
                    this.membersData[i].map(item => {
                        members[members.length] = {
                            auditGroupID: item.auditGroupID,
                            auditGroupMemberID: item.auditGroupMemberID,
                            staffID: item.staffID,
                            staffName: item.staffName,
                            groupRole: item.groupRole,
                            auditTopic: item.auditTopic
                        }
                    })
                    var staffName = []
                    members.map(item => {
                        if(item.auditTopic == '') {
                            staffName[staffName.length] = item.staffName + '暂无审核主题'
                        }
                        else {
                            staffName[staffName.length] = item.staffName + '审核主题：' + item.auditTopic
                        }
                    })
                    this.hseAuditGrouptable[i].members = staffName.join(',')
                    this.pageTotal = this.hseAuditGrouptable.length
                }
            }).catch(() => {
                this.$message.error('获取审核组数据失败！');
            })
        },
        handleEdit(row) {
            GetHSEAuditGroupTopic({type: row.groupType}).then(res => {
                this.auditTopic = res.data
            }).catch((err) => {
                this.$message.error(err)
            })
            this.membersData.map(item => {
                if(row.auditGroupID == item[0].auditGroupID) {
                    this.rowGroupMemberData = item
                }
            })
            this.memberData = this.rowGroupMemberData.auditTopic
            this.editVisibleDialog = true
            this.updateAuditTopic = []
        },
        getGroupMember(tab) {
            this.memberTopic = []
            if(this.updateAuditTopic.map(item => item.auditGroupMemberID).indexOf(tab.name) == -1){
                this.rowGroupMemberData.map(item => {
                    if(item.auditGroupMemberID == tab.name){
                        this.updateAuditTopic.push({
                            auditGroupMemberID: item.auditGroupMemberID,
                            auditTopic: item.auditTopic,
                            hseAuditSystemCodes: item.hseAuditSystemCodes
                        })
                        this.getMemberTopic(item)
                    }
                })
            }
            else{
                this.updateAuditTopic.map(item => {
                    if(item.auditGroupMemberID == tab.name){
                        this.getMemberTopic(item)
                    }
                })
            }
            this.memberID = tab.name
        },
        getMemberTopic(code) {
            var hseAuditSystemCodes = code.hseAuditSystemCodes.split(',')
            GetHSEAuditGroupTopic({type: '质量审核,HSE审核'}).then(res => {
                for(var i in hseAuditSystemCodes){
                    res.data.map(item => {
                        if(item.hseAuditSystemCode == hseAuditSystemCodes[i]){
                            this.memberTopic.push(item)
                        }
                    })
                }
            })
        },
        updateMemberAuditTopic() {
            var topics = []
            var codes = []
            this.memberTopic.map(item => {
                topics[topics.length] = item.evalueItem
                codes[codes.length] = item.hseAuditSystemCode
            })
            topics = topics.join(',')
            codes = codes.join(',')
            if(this.updateAuditTopic.map(item => item.auditGroupMemberID).indexOf(this.memberID) == -1){
                this.updateAuditTopic.push({
                    auditGroupMemberID: this.memberID,
                    auditTopic: topics,
                    hseAuditSystemCodes: codes
                })
            }
            else{
                this.updateAuditTopic.map(item => {
                    if(item.auditGroupMemberID == this.memberID){
                        item.auditTopic = topics
                        item.hseAuditSystemCodes = codes
                    }
                })
            }
        },
        submitAuditTopic() {
            UpdateHSEAuditTopic({ members: this.updateAuditTopic }).then(() => {
                this.$message.success("修改主题成功！")
                this.updateAuditTopic = []
                this.handleSearch()
            }).catch(() => {
                this.$message.error("修改主题失败！")
                this.updateAuditTopic = []
            })
            this.editVisibleDialog = false
        },
        handlePageChange(val) {
            console.log(val);
        }
    }
}
</script>

<style>
.el-table th {
    display: table-cell ! important;
}
.el-select-dropdown {
    max-width: 200px ! important;
}
</style>